<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>全部评论</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #FFFFFF;
		}

		.wraper {
			/*padding: 0.8rem 0.7rem 0.65rem;*/
			padding:0 0.5rem 2.55rem
		}

		.father_img {
			width: 1.4rem;
			height: 1.4rem;
			border-radius: 50%;
			margin-right: 0.5rem;
			flex-shrink: 0;
		}

		.title {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			line-height: 0.9rem;
			margin-bottom: 0.25rem;
		}

		.html_input {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			line-height: 1.2rem;
		}

		.html_input img {
			display: inline-block;
			vertical-align: sub;
		}

		.children_comment_title span {
			font-size: 0.65rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			line-height: 0.9rem;
		}

		.children_comment_cont {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 0.3rem;
		}

		.children_comment_time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 0.5rem;
			margin-left: 1.5rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
		}

		.border_bottom_comment {}

		.father_comment_time {}

		.all_detail_btn {
			height: 1.9rem;
			text-align: center;
			line-height: 1.9rem;
		}

		.margin_bottom_comment {
			margin-bottom: 0.5rem;
		}

		.three_title {
			font-size: 0.65rem;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			line-height: 0.9rem;
		}
		/*新加样式*/
		.fatherCom{
			display: flex;
			flex-wrap:wrap;
			background:rgba(255,255,255,1);
			box-shadow:0px 6px 13px 0px rgba(0,0,0,0.06);
			border-radius:8px;
			padding: 0.5rem;
			/*border: 1px solid black;*/
			width: 17rem;
			margin: 0.5rem;
		}
		.newest_head {
			display: flex;
		}
		.newest_name_time {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			margin-right: auto;
			/*margin-top: 0.55rem;*/
			/*border: 1px solid black;*/
		}
		.newest_name_comment{
			font-size: 0.7rem;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			color: rgba(46, 46, 46, 1);
			/*margin-bottom: 0.1rem;*/
			margin-top: 0.1rem;
		}
		.headPortrait_comment{
			width: 2rem;
			height: 2rem;
			margin-right: 0.3rem;
		}
		.headPortrait_comment img{
			border-radius: 50%;
		}
		.left_addtime {
			font-size: 0.55rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 0.8rem;
			display: flex;
			flex-direction: column;
		}
		.content_main {
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			line-height: 1.2rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/*-webkit-line-clamp: 2;
			overflow: hidden;*/
			/*border: 1px solid black;*/
			margin-top: 0.5rem;
			/*float: left;*/
			width: 16rem;
			/*margin-bottom: 0.5rem;*/
		}

		.content_main img {
			display: inline-block;
			vertical-align: sub;
		}

		.makeSome{
			/*border: 1px solid black;*/
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-bottom: 0.6rem;
			margin-top: 0.5rem;
			width: 16rem;
		}
		.makeItem{
			/*border: 1px solid black;*/
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.comMake{
			/*border: 1px solid black;*/
			display: flex;
			justify-content:space-between;
			margin-right: 1rem;
		}
		.comNum{
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
			font-size: 0.5rem;
			margin-top: 0.2rem
		}
		.comImg{
			width: 1rem;
			height: 1rem;
			margin-left: 0.3rem;
		}
		.zanMake{
			/*border: 1px solid black;*/
			display: flex;
			justify-content:space-between;
		}
		.zanNum{
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
			font-size: 0.5rem;
						margin-top: 0.2rem
		}
		.zanImg{
			width: 1rem;
			height: 1rem;
						margin-left: 0.3rem;
		}

		/*子评论*/
		.sonCom{
			width: 100%;
			display: flex;
			flex-wrap:wrap;
			padding: 0.5rem;
		}
		.sonItem{
			/*border: 1px solid black;*/
			width: 100%;
			padding-bottom: 0.5rem;
			background:rgba(255,255,255,1);
			box-shadow:0px 1px 0px 0px rgba(230,230,230,1);
			padding: 0.5rem;
		}
		.moerCom{
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(89,89,89,1);
			text-align: center;
			font-size: 0.75rem;
			padding-top: 0.5rem;
			padding-bottom: 1rem;
			margin-bottom: 2rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="wraper">
			<!-- 父评论 -->
			<!-- <div class="fatherCom" v-if="index == 1"> -->
				<!-- <div class="newest_head"> -->
					<!-- 头像 姓名 时间 -->
					<!-- <div class="headPortrait_comment">
						<img :src="comment.avatar" alt="">
					</div>
					<div class="newest_name_time">

						<div class="newest_name_comment">
							{{comment.nickname}}
						</div>
						<div class="left_addtime">
							{{comment.add_time}}
						</div>
					</div>

				</div> -->
				<!-- 内容 -->
				<!-- <div class="content_main">
					{{comment.content}}
				</div> -->

				<!-- 操作 -->
				<!-- <div class="makeSome">
					<div class="makeItem">

						<div class="comMake">
							<div class="comNum">{{comment.comment_count}}</div>
							<div class="comImg">
								<img src="../../image/icon/contecicon.png" alt="">
							</div>
						</div>

						<div class="zanMake">
							<div class="zanNum">{{comment.zan_num}}</div>
							<div class="zanImg">
								<img src="../../image/icon/icon-zan.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div> -->

			<!-- 子评论 -->
			<div class="sonCom">
				<div class="sonItem" v-for="(vo,index) in info">
					<div class="newest_head">
						<!-- 头像 姓名 时间 -->
						<div class="headPortrait_comment">
							<img :src="vo.avatar" alt="">
						</div>
						<div class="newest_name_time">

							<div class="newest_name_comment">
								{{vo.nickname}}
							</div>
							<div class="left_addtime">
								{{vo.add_time}}
							</div>
						</div>
						<!-- 点赞 -->
						<div class="zanMake" tapmode @click="opera_data(1,vo.id,vo.catid,index)">
							<div class="zanNum">{{vo.zan_num}}</div>
							<div class="zanImg">
								<img v-if="vo.is_zan == '0'" src="../../image/icon/icon-zan.png" alt="">
								<img v-if="vo.is_zan == '1'" src="../../image/icon/icon-zan-active.png" alt="">
							</div>
						</div>
					</div>
					<!-- 内容 -->
					<div class="content_main">
						{{vo.content}}
					</div>
					<!-- {{info}} -->
				</div>
			</div>

			<div class="moerCom">
				没有更多了
			</div>

		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/emoji.js"></script>
<script type="text/javascript" src="../../script/twemoji.js"></script>

<script>
	var UIChatBox;
	var vm = new Vue({
		el: "#app",
		data: {
			content: '',
			id: 0,
			catid: 0,
			to_uid: 0,
			pid: 0,
			tonickname: '',
			info: [],
			page: 1,
			showmore: true,
			comment_id:'',
			comment:{},
			is_zan:'',
			index:0
		},
		methods: {
			// getALLlist:function(){
			// 	api.ajax({
			// 	    url: 'http://zm.zonmay.com/api/Xiaoyouquan/commentList',
			// 	    method: 'post',
			// 	    data: {
			// 	        values: {
			// 	            article_id:$api.getStorage('article_id'),
			// 							page:vm.page,
			// 							token: $api.getStorage('token'),
			// 	        },
			// 	    }
			// 	},function(ret, err){
			// 	    if (ret) {
			// 					console.log(JSON.stringify(ret.data));
			// 	    } else {
			// 	        alert( JSON.stringify( err ) );
			// 	    }
			// 	});
			//
			// },
			//某评论回复数组
			get_list: function() {
				var index = $api.getStorage('index');
				// alert(index);
				if(index == 1){
					vm.index = index;
					get_data('api/Xiaoyouquan/singleCommentList', {
						token: $api.getStorage('token'),
						comment_id:vm.comment_id,
						article_id: vm.id,
						catid: vm.catid,
						page: vm.page
					}, function(ret) {
						// alert(JSON.stringify(ret,null,2));
						vm.comment = ret.data.article;
						vm.pid = ret.data.article.id
						vm.to_uid = ret.data.article.uid
						vm.info = ret.data.list;
						var count  = vm.info.length;
						send_event('comment_number', {
							count: count
						})
						console.log(JSON.stringify(vm.comment));
						console.log(JSON.stringify(vm.info));
					})
				}
				else if(index == 2){
					vm.index = index;
					get_data('api/Xiaoyouquan/commentList', {
						token: $api.getStorage('token'),
						article_id: vm.id,
						catid:vm.catid,
						page: vm.page
					}, function(ret) {
						// alert(JSON.stringify(ret));
						vm.info = ret.data.list;
						var count  = vm.info.length;
						send_event('comment_number', {
							count: count
						})
					})
				}

			},

			get_list_commentList: function() {
				get_data('api/Xiaoyouquan/commentList', {
					token: $api.getStorage('token'),
					article_id: vm.id,
					catid: vm.catid,
					page: vm.page
				}, function(ret) {
					// alert(JSON.stringify(ret.data.comment_count))
					if (ret.status) {
						if (ret.data.list.length < 20) {
							vm.loadmore = false
						}
						ret.data.list.forEach(function(el) {
							vm.info.push(el)
						})
						var count = ret.data.comment_count;
						console.log(count);
						send_event('comment_number', {
							count: count
						})
					}
				})
			},
			opera_data:function(index,id,catid,index1){
				// alert(index1)
				var type = index;
				var index1 = index1
				var id = id;
				var catid = catid;
				var source = 'xx_reply';
				opera(id, source, type, function(ret) {
					// alert(JSON.stringify(ret,null,2));
					if (ret.status && ret.data) {
						//点赞

						if (ret.status == '1' && ret.data == '1') {

						 toast('取消点赞成功')
						 vm.info[index1].is_zan = '0'
						 if(vm.info[index1].zan_num>0){
							 vm.info[index1].zan_num--;
						 }

					 }else if (ret.status == '1' && ret.data == '0') {
							toast('点赞成功');
							vm.info[index1].is_zan = '1'
							vm.info[index1].zan_num++;
						}

					}
					// alert(JSON.stringify(vm.info[index1]))
				})
			},
			filteredItems: function(index) {
				if (this.info[index].showmore) {
					return this.info[index].next;
				} else {
					return this.info[index].next.slice(0, 2);
				}
			},
			popupKeyboard: function(pid, to_uid, tonickname) {
				UIChatBox.popupKeyboard();
				vm.content = ''
				vm.pid = pid;
				vm.to_uid = to_uid;
				var tonickname = tonickname;
				UIChatBox.setPlaceholder({
					placeholder: '回复' + tonickname
				});
			},
			transEmo: function(emoMsg) {
				var emoPath, transMsg;
				var reg = /\[(.*?)\]/gm;
				transMsg = emoMsg.replace(reg, function(match) {
					for (var i = 0, len = emoData.length; i < len; i++) {
						if (emoData[i].text === match) {
							emoPath = '../../res/emotion/' + emoData[i].name + '.png';
							return '<img width="20" height="20" src="' + emoPath + '" />'
						}
					}
					return match;
				});
				return transMsg;
			}
		},
		computed: {

		}
	})
	apiready = function() {
		vm.id = $api.getStorage('id')
		vm.catid = $api.getStorage('catid')
		vm.comment_id = $api.getStorage('comment_id')
		vm.get_list()
		// iOS手势关闭页面时
		// api.addEventListener({
		// 	name: 'viewdisappear'
		// }, function(ret, err) {
		// 	if(ret){
		// 			send_event('getUsage')
		// 	}
		// });
		UIChatBox = api.require('UIChatBox');
		openchatbox()
			fnInitPullRefresh(function() {
				vm.page = 1;
				vm.info = [];
				vm.loadmore = true;
				vm.get_list()
				api.refreshHeaderLoadDone()
			})
		fnInitScrollToBottom(function(ret) {
				console.log(111)
				if (vm.loadmore) {
					vm.page++;
					vm.get_list()
				}
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.page = 1;
				vm.info = [];
				vm.loadmore = true;
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		UIChatBox.addEventListener({
			target: 'inputBar',
			name: 'valueChanged'
		}, function(ret, err) {
			if (ret) {
				if (ret.value.length > 50) {
					alert('单次评论最多50字哦！');
					UIChatBox.value({
						msg: ret.value.slice(0, 50)
					});
					vm.content = ret.value.slice(0, 50)
				} else {

					vm.content = ret.value
				}

				// vm.get_list()
			} else {
				console.log(JSON.stringify(err));
			}
		});
		UIChatBox.addEventListener({
			target: 'inputBar',
			name: 'move'
		}, function(ret, err) {
			if (ret) {
				if (vm.content == '' && ret.panelHeight == '0') {
					// vm.pid = 0;
					// vm.to_uid = 0;
					UIChatBox.setPlaceholder({
						placeholder: '请输入您的评论'
					});
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});

		//

	}

	function countSymbols(string) {
		return twemoji.parse(string).replace(/<img.+?\/>/g, '_').length;
	}

	function sendComment() {
		if (!$api.getStorage('token')) {
			openWin_login()
			return;
		}
		get_data('api/Xiaoyouquan/sendComment', {
			token: $api.getStorage('token'),
			article_id: vm.id,
			catid: vm.catid,
			pid: vm.pid,
			to_uid: vm.to_uid,
			content: vm.content
		}, function(ret) {
		// 	alert(JSON.stringify({
		// 	token: $api.getStorage('token'),
		// 	article_id: vm.id,
		// 	catid: vm.catid,
		// 	pid: vm.pid,
		// 	to_uid: vm.to_uid,
		// 	content: vm.content
		// }))
			if (ret.status) {
				toast('评论成功')
				vm.page = 1;
				vm.info = [];
				vm.loadmore = true;
				vm.get_list()
				UIChatBox.closeKeyboard();
			}
		})
	}

	function openchatbox() {
		UIChatBox.open({
			placeholder: '请输入您的评论',
			maxRows: 4,
			emotionPath: 'widget://res/emotion',
			texts: {
				sendBtn: {
					title: '发布'
				}
			},
			styles: {
				topDivider: { //(可选项)顶部分割线配置
					width: 1, //(可选项)顶部分割线的粗细，默认：0
					color: '#EEEEEE' //(可选项)顶部分割线的颜色；默认：#000 ;支持图片设置(fs:// & widget://)
				},
				inputBar: {
					borderColor: '#f5f5f5',
					bgColor: '#ffffff',
					lineColor: '#EEEEEE'
				},
				inputBox: {
					borderColor: '#f5f5f5',
					bgColor: '#F6F6F6',
					boardBgColor: '#FFFFFF'
				},
				emotionBtn: {
					normalImg: 'widget://image/btn/btn-smile.png'
				},
				keyboardBtn: {
					normalImg: 'widget://res/img/chatBox_key1.png'
				},
				indicator: {
					target: 'both',
					color: '#c4c4c4',
					activeColor: '#9e9e9e'
				},
				sendBtn: {
					titleColor: '#ffffff',
					bg: '#6BB4FF',
					activeBg: '#ff00ff',
					titleSize: 14
				}
			}
		}, function(ret, err) {
			if (ret) {
				if (ret.eventType == 'send' && ret.msg != '') {
					vm.content = ucs2_to_utf16(ret.msg)
					sendComment()
				}
				//console.log(JSON.stringify(ret));
			} else {
				console.log(JSON.stringify(err));
			}
		});

	}


	function opera_data_children(id, status, index, index1) {
		send_event('refresh_data');
		var source = vm.catid == '1' ? 'xx_reply' : 'xyx_reply'
		opera_children(id, source, 1, function(ret) {
			if (ret.status) {
				if (status == '1') {
					toast('取消点赞')
					vm.info[index].next[index1].is_zan = 0
					if(vm.info[index].next[index1].zan_num != 0){
						vm.info[index].next[index1].zan_num--
					}
				}
				if (status == '0') {
					toast('点赞成功');
					vm.info[index].next[index1].is_zan = 1
					vm.info[index].next[index1].zan_num++
				}
				send_event('refresh_thumbs');
			}
		})
	}

	function opera_data(id, status, index) {
		send_event('refresh_data');
		var source = vm.catid == '1' ? 'xx_reply' : 'xyx_reply'
		opera(id, source, 1, function(ret) {
			if (ret.status) {
				if (status == '1') {
					toast('取消点赞')
					vm.info[index]['is_zan'] = 0;
					if(vm.info[index].zan_num!= 0){
						vm.info[index].zan_num--
					}
				}
				if (status == '0') {
					toast('点赞成功');
					vm.info[index]['is_zan'] = 1;
					vm.info[index].zan_num++
				}

				// vm.page = 1;
				// vm.info = [];
				// vm.loadmore = true;
				// vm.get_list()
			}
		})
	}
</script>

</html>
